import React, { Component } from 'react'

import { Routes, Route, Navigate } from 'react-router-dom'
//  Routes 理解为 vue-router 中的 router-view 路由出口
//  Route 路由的配置规则

// 导入组件
import Home from './views/home/index'
import Kind from './views/kind/index'
import Cart from './views/cart/index'
import User from './views/user/index'


import Footer from './components/Footer'

// 路由懒加载
// 懒加载 详情页面  404 页面   登录页面
const NotFound = React.lazy(()=> import('./views/error/index'))
const Detail = React.lazy(()=> import('./views/detail/index'))
const Login = React.lazy(()=> import('./views/login/index'))


export default class App extends Component {
  render() {
    return (
      <div className='container'>

        <Routes>
          {/* 如果需要进行路由的重定向可以使用 Navigate 实现 */}
          <Route path='/' element={<Navigate to='/home' />} ></Route>
          <Route path='/home' element={<Home />} />
          <Route path='/kind' element={<Kind />} />
          <Route path='/cart' element={<Cart />} />
          <Route path='/user' element={<User />} />
          <Route path='/detail/:proid' element={<Detail />} />
          <Route path='/login' element={<Login />} />

          {/* 配置 404 页面 */}
          <Route path='*' element={<NotFound />} />
        </Routes>



        {/* <div className='box'>
          <header className='header'>头部</header>
          <div className='content'>内容</div>
        </div> */}


        {/* <Footer /> */}
        <Routes>
          <Route path='/home' element={<Footer />} />
          <Route path='/kind' element={<Footer />} />
          <Route path='/cart' element={<Footer />} />
          <Route path='/user' element={<Footer />} />
        </Routes>

      </div>
    )
  }
}
